import React, { useState, useEffect } from 'react';
import './home.scss';
import { Swiper } from 'antd-mobile';
import RecommendLike from '@/components/table/scrollGoods';
import HomeNavbar from './HomeNavbar';
import QuickSwiper from './QuickSwiper';
import BottomNav from '../bottom';

const HomePage = () => {
    const [loading, setLoading] = useState(true);

    return (
        <>
            <div className='seal-home'>
                <div className='seal-head'>
                    <HomeNavbar />
                </div>

                <div className='seal-body' style={{ paddingBottom: '54px' }}>
                    <div className='seal-box'>
                        <div className='seal-banner'>
                            <Swiper
                                onIndexChange={i => {
                                    console.log(i, 'onIndexChange1')
                                }}
                                indicatorProps={{
                                    color: 'white',
                                }}
                            >
                                <Swiper.Item key={1}>
                                    <img width={'375px'} height={'160px'} src="https://img.youpin.mi-img.com/youpinoper/33d56f74_956c_4980_b985_bb48ec935bd8.jpeg@base@tag=imgScale&h=320&w=750"></img>
                                </Swiper.Item>
                                <Swiper.Item key={2}>
                                    <img width={'375px'} height={'160px'} src="https://img.youpin.mi-img.com/youpinoper/33d56f74_956c_4980_b985_bb48ec935bd8.jpeg@base@tag=imgScale&h=320&w=750"></img>
                                </Swiper.Item>
                                <Swiper.Item key={3}>
                                    <img width={'375px'} height={'160px'} src="https://img.youpin.mi-img.com/youpinoper/33d56f74_956c_4980_b985_bb48ec935bd8.jpeg@base@tag=imgScale&h=320&w=750"></img>
                                </Swiper.Item>
                                <Swiper.Item key={4}>
                                    <img width={'375px'} height={'160px'} src="https://img.youpin.mi-img.com/youpinoper/33d56f74_956c_4980_b985_bb48ec935bd8.jpeg@base@tag=imgScale&h=320&w=750"></img>
                                </Swiper.Item>
                            </Swiper>
                        </div>
                    </div>

                    <div className='seal-box'>
                        <QuickSwiper />
                    </div>

                    <div className='seal-box seal-floor'>
                        <div className='seal-recommend'>
                            <RecommendLike />
                        </div>
                    </div>
                </div>

                <div className='seal-footer'>
                    <BottomNav />
                </div>
            </div>
        </>

    );
};

export default HomePage;